<!--
 * @Autor: GXL
 * @Date: 2022-04-09 21:41:51
 * @LastEditTime: 2022-04-09 22:00:49
 * @FilePath: \blog_web\src\views\video\components\releaseVideo.vue
 * @Description: I see that all living beings have no intention, but I moved my heart to you
-->
<template>
  <el-dialog
    :visible="releaseDialogVisible"
    title="发布视频"
    width="30%"
    custom-class="launch-assess"
    :before-close="closeDialog"
    :append-to-body="true"
    :center="true"
  >
    <el-input placeholder="请输入视频的标题" v-model="content"> </el-input>
    <Upload
      :limit="2"
      :isImgLoadModel="true"
      v-if="!uploadImgsPreview.length"
      @success="uploadSuccessCallback($event)"
    >
    </Upload>
    <Preview-img
      :uploadImgsPreview="uploadImgsPreview"
      @deleteImg="deleteImg"
    ></Preview-img>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">发布</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入接口
import { releaseVideo } from '@/api/video.js'
// 导入上传的组件
import Upload from '@/components/upload/upload'
// 导入图片预览组件
import PreviewImg from '@/components/PreviewImg/Previewimg'
export default {
  name: 'release',
  props: {
    releaseDialogVisible: { type: Boolean, default: false }
  },
  components: {
    Upload,
    PreviewImg
  },
  data() {
    return {
      content: '',
      video_url: '',
      uploadImgsPreview: []
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.content = ''
      this.uploadImgsPreview = []
      this.$emit('update:releaseDialogVisible', false)
    },
    // 发布留言
    onSubmit() {
      releaseVideo({
        video_title: this.content,
        video_url: this.video_url
      }).then((res) => {
        console.log('发布成功', res)
        if (res.code == 200) {
          this.$message.success('发布成功,等待管理员审核通过')
          this.closeDialog()
        }
      })
    },
    // 删除图片的
    deleteImg() {
      this.uploadImgsPreview = []
    },
    uploadSuccessCallback(e) {
      console.log('成功的回调', e)
      this.video_url = e.imgUrl
      this.uploadImgsPreview.push(e.imgUrl)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-input {
  margin-bottom: 20px;
}
</style>
